<template>
  <div class="add-wrap" v-loading="loading">
    <Breadcrumb :titles="titles"></Breadcrumb>
    <div class="body">
      <div class="project">
        <el-form
          :model="basicForm"
          label-position="top"
          :rules="basicRules"
          ref="basicFormRef"
        >
          <!-- 基本信息 -->
          <div class="project-part">
            <div
              class="project-part-title project-part-title1"
            >
              基本信息
            </div>
            <div class="project-part-content">
              <el-row :gutter="24">
                <el-col
                  :xs="24"
                  :sm="24"
                  :md="12"
                  :lg="8"
                  :xl="6"
                >
                  <el-form-item
                    label="园区名称"
                    prop="name"
                  >
                    <el-input
                      v-model="basicForm.name"
                      :disabled="isEnterpriseDisabled"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col
                  :xs="24"
                  :sm="24"
                  :md="12"
                  :lg="8"
                  :xl="6"
                >
                  <el-form-item
                    label="责任单位"
                    prop="landUsage"
                  >
                    <el-select
                      placeholder=""
                      v-model="basicForm.unit"
                      clearable
                      :disabled="isEnterpriseDisabled"
                    >
                      <el-option
                        v-for="item in unitOptions"
                        :key="item.pkid"
                        :label="item.deptName"
                        :value="item.pkid"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :sm="24" :md="12" :lg="8" :xl="6">
                  <el-form-item
                    label="园区面积"
                    prop="area"
                  >
                    <el-input
                      v-model="basicForm.area"
                      :disabled="isAdminDisabled"
                      ><template slot="append"
                        >平方米</template
                      >
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :sm="24" :md="12" :lg="8" :xl="6">
                  <el-form-item
                    label="建筑密度"
                    prop="density"
                  >
                    <el-input
                      v-model="basicForm.density"
                      :disabled="isAdminDisabled"
                      ><template slot="append">%</template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :sm="24" :md="12" :lg="8" :xl="6">
                  <el-form-item
                    label="停车位数量"
                    prop="parkCount"
                  >
                    <el-input
                      v-model="basicForm.parkCount"
                      :disabled="isAdminDisabled"
                      ><template slot="append">个</template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :sm="24" :md="12" :lg="8" :xl="6">
                  <el-form-item
                    label="绿地率"
                    prop="greenPercent"
                  >
                    <el-input
                      v-model="basicForm.greenPercent"
                      :disabled="isAdminDisabled"
                      ><template slot="append">%</template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :sm="24" :md="12" :lg="8" :xl="6">
                  <el-form-item
                    label="出租率"
                    prop="rentPercent"
                  >
                    <el-input
                      v-model="basicForm.rentPercent"
                      :disabled="isAdminDisabled"
                      ><template slot="append">%</template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :sm="24" :md="12" :lg="8" :xl="6">
                  <el-form-item
                    label="园区简介"
                    prop="content"
                  >
                    <el-input
                      v-model="basicForm.content"
                      :disabled="isAdminDisabled"
                      type="textarea"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-form>
      </div>
    </div>
    <div class="line" v-show="!isDetail">
      <el-button
        @click="saveInfo"
        class="save-btn"
        :loading="btnLoading"
        >提交</el-button
      >
    </div>
  </div>
</template>

<script>
import Breadcrumb from '@/components/breadcrumb'
import { getDictOptions } from '@/utils/dict'
import {
  addProjectInfo,
  queryProjectDetail
} from '@/api/ParkManagement'
import { queryJsgsList } from '@/api/projectMessage'
// import { getZrUnit } from '@/api/lygl'
import { isAdmin, isEnterprise } from '@/utils/permission'

export default {
  props: {
    pkid: String,
    title: String,
    isEdit: {
      type: Boolean,
      default: false
    },
    isDetail: {
      type: Boolean,
      default: false
    }
  },
  components: {
    Breadcrumb
  },
  data() {
    return {
      basicForm: {
        pkid: '',
        name: '',
        unit: '',
        area: '',
        density: '',
        parkCount: '',
        greenPercent: '',
        rentPercent: '',
        content: '',
        status: 'dtj'
      },
      basicRules: {
        name: [
          {
            required: true,
            message: '请输入园区名称',
            trigger: 'blur'
          }
        ],
        unit: [
          {
            required: true,
            message: '请选择责任单位',
            trigger: 'blur'
          }
        ],
        area: [
          {
            pattern: /^(([1-9]{1}\d*)|(0{1}))(\.\d{1,2})?$/,
            message: '请输入最多两位小数的正数',
            trigger: 'blur'
          }
        ],
        parkCount: [
          {
            pattern: /^[+]{0,1}(\d+)$/,
            message: '请输入正整数',
            trigger: 'blur'
          }
        ],
        greenPercent: [
          {
            pattern:
              /^(100|([1-9][0-9]?)|(0|[1-9][0-9]?)(\.[\d]{1,2}))$/,
            message: '请输入0-100最多两位小数的数字',
            trigger: 'blur'
          }
        ],
        rentPercent: [
          {
            pattern:
              /^(100|([1-9][0-9]?)|(0|[1-9][0-9]?)(\.[\d]{1,2}))$/,
            message: '请输入0-100最多两位小数的数字',
            trigger: 'blur'
          }
        ],
        density: [
          {
            pattern:
              /^(100|([1-9][0-9]?)|(0|[1-9][0-9]?)(\.[\d]{1,2}))$/,
            message: '请输入0-100最多两位小数的数字',
            trigger: 'blur'
          }
        ]
      },
      unitOptions: [],
      loading: false,
      btnLoading: false
    }
  },
  computed: {
    titles() {
      return [this.title]
    },
    isAdminDisabled() {
      return (
        this.isDetail ||
        (!this.isDetail && !this.pkid && isAdmin())
      )
    },
    isEnterpriseDisabled() {
      return this.isDetail || isEnterprise()
    }
  },
  mounted() {
    this.getUnit()
    if (this.isEdit) {
      this.getDetailInfo()
    }
  },
  methods: {
    getUnit() {
      queryJsgsList().then((res) => {
        this.unitOptions = res.data
      })
    },

    // 获取项目详情
    getDetailInfo() {
      this.loading = true
      queryProjectDetail(this.pkid).then((res) => {
        if (res.success) {
          const data = res.data
          this.basicForm = data
        } else {
          this.$message.error(res.message)
        }
        this.loading = false
      })
    },

    // 保存信息
    saveInfo() {
      this.$refs.basicFormRef.validate((res) => {
        if (res) {
          this.btnLoading = true
          let formData = JSON.parse(
            JSON.stringify(this.basicForm)
          )
          if (formData.pkid && isEnterprise()) {
            formData.status = 'ytj'
          }

          addProjectInfo(formData).then((res) => {
            if (res.success) {
              this.$message.success('保存成功')
              this.$router.push({
                path: '/wisdomOperation/ParkManagement/list',
                query: { refresh: Date.now() }
              })
            } else {
              this.$message.error(res.message)
            }
            this.btnLoading = false
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~@/assets/css/form.scss';
</style>
